<template>
  <div>
    <sticky :z-index="9" :class-name="'sub-navbar sticky'">
      <div class="wrap float">
        <div class="left" />
        <div class="right">
          <el-button v-perm="['sys:perm:save']" size="small" style="margin-left: 10px;" type="primary" @click="handleSavePerm">
            {{ $t('common.actions.save') }}
          </el-button>
          <el-button style="background-color:white;" size="small" @click="closeTagView">
            {{ $t('common.actions.close') }}
          </el-button>
        </div>
        <div class="center"><div class="page-title">{{ getLang('pageTitle') }}</div></div>
      </div>
    </sticky>

    <div class="app-container">

      <el-row :gutter="16">
        <el-col :span="4">
          <div class="block-title">{{ getLang('blockTitle') }}</div>
          <SimpleTree
            :can-filter="false"
            :data="formObj.roleTreeData.data"
            :node-key="formObj.roleTreeData.nodeKey"
            :selected-node="formObj.roleTreeData.selectedNode"
            :tree-node-click-fnc="handleTreeNodeClick"
          />
        </el-col>
        <el-col :span="20">

          <table
            class="auth-table"
            cellspacing="0"
            cellpadding="0"
            border-collapse="collapse"
            width="100%"
          >
            <template v-for="module in formObj.moduleAllList">
              <tr v-if="module.menuType === '1'" :key="module.menuId">
                <td class="first-td">
                  <div style="margin-left: 20px;">
                    <el-checkbox
                      v-model="formObj.checkAllFlg[module.menuId]"
                      :indeterminate="formObj.isIndeterminate[module.menuId]"
                      @change="handleCheckModuleAll(module.menuId, $event)"
                    >{{ module.menuName }}
                    </el-checkbox>
                  </div>
                </td>
                <td class="second-td">&nbsp;</td>
              </tr>
              <template v-if="module.children && module.children.length > 0">
                <tr v-for="menu in module.children" :key="menu.menuId">
                  <td class="first-td">
                    <div style="margin-left: 45px;">
                      <el-checkbox
                        v-model="formObj.checkAllFlg[menu.menuId]"
                        :indeterminate="formObj.isIndeterminate[menu.menuId]"
                        @change="handleCheckMenuAll(menu.menuId, $event)"
                      >{{ menu.menuName }}
                      </el-checkbox>
                    </div>
                  </td>
                  <td class="second-td">
                    <el-checkbox-group v-model="formObj.checkedItems[menu.menuId]" @change="handleCheckedPerm(menu.menuId)">
                      <el-checkbox
                        v-for="fnItem in menu.children"
                        :key="fnItem.menuId"
                        :label="fnItem.menuId"
                      >{{ fnItem.menuName }}</el-checkbox>
                    </el-checkbox-group>
                  </td>

                </tr>
              </template>
            </template>
          </table>
        </el-col>
      </el-row>

      <el-tooltip placement="top" content="tooltip">
        <back-to-top :custom-style="baseBckToTopStyle" :visibility-height="300" :back-position="1" transition-name="fade" />
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import BackToTop from '@/components/BackToTop'
import perm from '@/directive/perm/index.js' // 权限判断指令
import SimpleTree from '../../common/components/simple-tree/SimpleTree.vue'
import Sticky from '@/components/Sticky'
import logic from './perm.logic'

export default {
  name: 'PermPage',
  directives: { perm },
  components: { BackToTop, SimpleTree, Sticky },
  mixins: [logic]
}
</script>

<style lang="scss" scoped>

.auth-table {
  width: 100%;
  border: 1px solid #ececec;
  border-bottom: none;
  border-radius: 4px;
  color: #303133;
  font-size: 15px;
  td {
    height: 50px;
    border: 1px solid #ececec;
  }
  .first-td {
    width: 180px;
    text-align: left;
    border-top: none;
    border-right: none;
    border-left: none;
    background: #f8f8f8;
  }
  .second-td {
    padding-left: 15px;
    border-top: none;
    border-right: none;
  }
}

// 左，中，右布局
.wrap > div {text-align: center; }
.float .left {
  width: 200px;
  float: left;
  // background-color: #f00;
}
.float .center {
  // background-color: green;
}
.float .right {
  width: 200px;
  float: right;
  text-align: right;
  // background-color: #ff0;
}

</style>
